<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	
	<!-- jQuery-->
	<script type="text/javascript" src="/static/plugins/jquery/jquery-3.6.0.min.js"></script>
	
	<!-- layui-->
	<link rel="stylesheet" href="/static/plugins/layui/2.7.6/css/layui.css" media="all">
	<script src="/static/plugins/layui/2.7.6/layui.js" charset="utf-8"></script>
	
	<!-- iconfont -->
	<link rel="stylesheet" href="/static/css/icon/iconfont.css" media="all" />

	<!-- flow -->
	<link rel='stylesheet' href='/static/plugins/ysflow/demo1/css/datainspector.css'/>
	<script src="/static/plugins/ysflow/demo1/js/go.js"></script>
	<script src="/static/plugins/ysflow/demo1/js/datainspector.js"></script>
<script id="code">
	function init() {
		if (window.goSamples) goSamples();
		var $$ = go.GraphObject.make;

		myDiagram =
			$$(go.Diagram, "myDiagramDiv",  // 创建空的背景图
				{
					initialContentAlignment: go.Spot.Center,
					allowCopy: false,
					allowDrop: true,  // must be true to accept drops from the Palette  必须接受来自调色板的元素
					"LinkDrawn": showLinkLabel,  // this DiagramEvent listener is defined below
					"LinkRelinked": showLinkLabel,
					scrollsPageOnFocus: false,
					"undoManager.isEnabled": true,  // 启用撤销和恢复
					allowRelink : false
				}
			);
		// helper definitions for node templates
		function nodeStyle() {
			return [
				new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
				{
					// the Node.location is at the center of each node
					locationSpot: go.Spot.Center
				}
			];
		}
		
		function makePort(name, align, spot, output, input, maxLinks) {
			var horizontal = align.equals(go.Spot.Top) || align.equals(go.Spot.Bottom);
			return $$(go.Shape,
				{
					fill: "transparent",  // changed to a color in the mouseEnter event handler
					strokeWidth: 0,  // no stroke
					width: horizontal ? NaN : 8,  // if not stretching horizontally, just 8 wide
					height: !horizontal ? NaN : 8,  // if not stretching vertically, just 8 tall
					alignment: align,  // align the port on the main Shape
					stretch: (horizontal ? go.GraphObject.Horizontal : go.GraphObject.Vertical),
					portId: name,  // declare this object to be a "port"
					fromSpot: spot,  // declare where links may connect at this port
					fromLinkable: output,  // 声明用户是否可以from here
					fromMaxLinks: maxLinks,
					toSpot: spot,  // declare where links may connect at this port
					toLinkable: input,  // declare whether the user may draw links to here
					cursor: "pointer",  // show a different cursor to indicate potential link point
					mouseEnter: function (e, port) {  // the PORT argument will be this Shape
						if (!e.diagram.isReadOnly) port.fill = "rgba(255,0,255,0.5)";
					},
					mouseLeave: function (e, port) {
						port.fill = "transparent";
					}
				});
		}

		function textStyle() {
			return {
				font: "bold 11pt Helvetica, Arial, sans-serif",
				stroke: "whitesmoke"
			}
		}

		// define the Node templates for regular nodes
		myDiagram.nodeTemplateMap.add("Default",  // the default category   文本节点
			$$(go.Node, "Table", nodeStyle(),
				// the main object is a Panel that surrounds a TextBlock with a rectangular Shape
				$$(go.Panel, "Auto",
					$$(go.Shape, "RoundedRectangle",
						{fill: "#ffc107", strokeWidth: 0},
						new go.Binding("figure", "figure")),
					$$(go.TextBlock, textStyle(),
						{
							margin: 8,
							maxSize: new go.Size(160, NaN),
							wrap: go.TextBlock.WrapFit,
							editable: true
						},
						new go.Binding("text").makeTwoWay())
				),
				// four named ports, one on each side:
				makePort("T", go.Spot.Top, go.Spot.TopSide, false, true),
				makePort("L", go.Spot.Left, go.Spot.LeftSide, true, true),
				makePort("R", go.Spot.Right, go.Spot.RightSide, true, true),
				makePort("B", go.Spot.Bottom, go.Spot.BottomSide, true, false)
			)
		);

		myDiagram.nodeTemplateMap.add("Conditional",   //判断节点
			$$(go.Node, "Table", nodeStyle(),
				// the main object is a Panel that surrounds a TextBlock with a rectangular Shape
				$$(go.Panel, "Auto",
					$$(go.Shape, "Diamond",
						{fill: "#00A9C9", strokeWidth: 0},
						new go.Binding("figure", "figure")),
					$$(go.TextBlock, textStyle(),
						{
							margin: 8,
							maxSize: new go.Size(160, NaN),
							wrap: go.TextBlock.WrapFit,
							editable: true
						},
						new go.Binding("text").makeTwoWay())
				),
				// four named ports, one on each side:
				makePort("T", go.Spot.Top, go.Spot.Top, false, true),
				makePort("L", go.Spot.Left, go.Spot.Left, true, true),
				makePort("R", go.Spot.Right, go.Spot.Right, true, true),
				makePort("B", go.Spot.Bottom, go.Spot.Bottom, true, false)
			)
		);

		myDiagram.nodeTemplateMap.add("Start",  // 开始节点
			$$(go.Node, "Table", nodeStyle(),{
					deletable: false
			},
				$$(go.Panel, "Auto",
					$$(go.Shape, "Circle",
						{minSize: new go.Size(40, 40), fill: "#937367", strokeWidth: 0}),
					$$(go.TextBlock, "Start", textStyle(),
						new go.Binding("text"))
				),
				// three named ports, one on each side except the top, all output only:
			   
				makePort("B", go.Spot.Bottom, go.Spot.Bottom, true, false, 1)
			));

		myDiagram.nodeTemplateMap.add("End",  //结束节点
			$$(go.Node, "Table", nodeStyle(),{
					deletable: false
			},
				$$(go.Panel, "Auto",
					$$(go.Shape, "Circle",
						{minSize: new go.Size(40, 40), fill: "#DC3C00", strokeWidth: 0}),
					$$(go.TextBlock, "End", textStyle(),
						new go.Binding("text"))
				),
				// three named ports, one on each side except the bottom, all input only:
				makePort("T", go.Spot.Top, go.Spot.Top, false, true),
				makePort("L", go.Spot.Left, go.Spot.Left, false, true),
				makePort("R", go.Spot.Right, go.Spot.Right, false, true)
			));

		// replace the default Link template in the linkTemplateMap
		myDiagram.linkTemplate =
			$$(go.Link,  // the whole link panel
				{
					routing: go.Link.AvoidsNodes,  //避开其他节点
					curve: go.Link.JumpOver,    //连线的样式
					corner: 5,   //角
					toShortLength: 4,
			/*****************************************************************/
					relinkableFrom: false,
					relinkableTo: false,
					reshapable: true,
					resegmentable: true,
					// mouse-overs subtly highlight links:  鼠标悬停微妙地突出显示链接
					mouseEnter: function (e, link) {
						link.findObject("HIGHLIGHT").stroke = "rgba(30,144,255,0.2)";
					},
					mouseLeave: function (e, link) {
						link.findObject("HIGHLIGHT").stroke = "transparent";
					},
					selectionAdorned: false
				},
				new go.Binding("points").makeTwoWay(),
				$$(go.Shape,  // the highlight shape, normally transparent  突出显示形状，通常是透明的。
					{isPanelMain: true, strokeWidth: 8, stroke: "transparent", name: "HIGHLIGHT"}),
				$$(go.Shape,  // the link path shape 链接路径形状
					{isPanelMain: true, stroke: "gray", strokeWidth: 2},
					new go.Binding("stroke", "isSelected", function (sel) {
						return sel ? "dodgerblue" : "gray";
					}).ofObject()),
				$$(go.Shape,  // the arrowhead 箭头
					{toArrow: "standard", strokeWidth: 0, fill: "gray"}),
				$$(go.Panel, "Auto",  // the link label, normally not visible 链接标签，通常不可见
					{visible: false, name: "LABEL", segmentIndex: 2, segmentFraction: 0.5},
					new go.Binding("visible", "visible").makeTwoWay(),
					$$(go.Shape, "RoundedRectangle",  // the label shape
						{fill: "#F8F8F8", strokeWidth: 0}),
					$$(go.TextBlock, "Yes",  // the label
						{
							textAlign: "center",
							font: "10pt helvetica, arial, sans-serif",
							stroke: "#333333",
							editable: true
						},
						new go.Binding("text").makeTwoWay())
				)
			);
		
		function showLinkLabel(e) {
			var label = e.subject.findObject("LABEL");
			if (label !== null) label.visible = (e.subject.fromNode.data.category === "Conditional");
		}
		
		//var json = {"linkToPortIdProperty":"toPort","linkFromPortIdProperty":"fromPort","nodeDataArray":[{"loc":"337 -88","text":"开始","category":"Start","key":-1},{"loc":"174.99999999999997 223.00000000000006","text":"结束","category":"End","key":-2},{"loc":"337 31","remark":"","text":"节点1","category":"Default","key":-3},{"loc":"175 31","remark":"","text":"判断","category":"Conditional","cond":"bbbb","key":-4},{"loc":"175 140","remark":"","text":"节点2","category":"Default","key":-5}],"linkDataArray":[{"fromPort":"B","toPort":"T","from":-1,"to":-3,"auditType":"2","points":[337.00000000000006,-66.69187732075537,337.00000000000006,-56.69187732075537,337.00000000000006,-27.195512687054276,337,-27.195512687054276,337,2.300851946646816,337,12.300851946646816]},{"fromPort":"L","toPort":"R","from":-3,"to":-4,"auditType":"1","points":[307.5019963558265,31,297.5019963558265,31,263.9109865812336,31,263.9109865812336,31,230.31997680664062,31,220.31997680664062,31]},{"auditSelfDef":"admin","visible":true,"fromPort":"B","toPort":"T","condResult":"0","from":-4,"to":-5,"text":"No","auditType":"3","points":[175,62.875448608398436,175,72.87544860839844,175,92.08815027752263,175,92.08815027752263,175,111.30085194664682,175,121.30085194664682]},{"auditSelfDef":"00001","visible":true,"fromPort":"L","toPort":"L","condResult":"1","from":-4,"to":-2,"auditType":"3","text":"Yes","points":[129.68002319335938,31,119.68002319335938,31,119.68002319335938,223,131.68595025705736,223,143.69187732075537,223,153.69187732075537,223]},{"auditSelfDef":"admin","fromPort":"B","toPort":"T","from":-5,"to":-2,"auditType":"3","points":[175,158.69914805335318,175,168.69914805335318,175,180,175,180,175,191.69187732075537,175,201.69187732075537]}],"class":"go.GraphLinksModel"};
		var json = [(${dto.info})];
		myDiagram.model = go.Model.fromJson(json);
		var myInspector = new Inspector("id_data_config", myDiagram,
		{
			includesOwnProperties: false,
			properties: {
				"key": {show: false, readOnly: true},
				"loc": {show: false},
				"text": {},
				"remark": {}
			}
		});
		myPalette =   //左边的模型
			$$(go.Palette, "myPaletteDiv",  // must name or refer to the DIV HTML element
			{
				scrollsPageOnFocus: false,
				nodeTemplateMap: myDiagram.nodeTemplateMap,  // share the templates used by myDiagram
				model: new go.GraphLinksModel([  // specify the contents of the Palette
					{
						category: "Default",
						text: "节点",
						remark: ''
					},
					{
						category: "Conditional",
						text: "判断",
						remark: ''
					},
				])
			});
	}

	function deleteDisconnectedNodes(diagram) {
		var nodesToDelete = diagram.nodes.filter(function (n) {
			return n.category !== "Start" && n.findLinksInto().count === 0;   //不为start且连线数目为0
		});
		if (nodesToDelete.count > 0) {
			diagram.removeParts(nodesToDelete, false);
			deleteDisconnectedNodes(diagram);
		}
	}

	// 数据填充
	function save() {  //修改后保存数据
		var dataJson = myDiagram.model.toJson();
		var nodeDataArray = myDiagram.model.nodeDataArray;
		var nodeDataArrayLength = nodeDataArray.length;
		for(var n = 0; n < nodeDataArrayLength; n++) {
			var dataCategory = nodeDataArray[n].category;
			/*
			if(dataCategory == 'Default' || dataCategory == 'Conditional') {
				var dataChoice = nodeDataArray[n].choice;
				if(dataChoice.length < 1 ){
					return confirm('处理信息选择框有空值');
				}
			}
			*/
		}
		myDiagram.isModified = false;
	}
</script>
</head>
<body style="padding: 10px 0 0 10px;" onLoad="init()">
	<div class="layui-tab layui-tab-brief" style="background-color: #fff;">
		<ul class="layui-tab-title">
			<li class="layui-this">流程图</li>
			<li>审批记录</li>
		</ul>
		<div class="layui-tab-content">
			<div class="layui-tab-item layui-show">
				<div>
					<div style="width: 80%;display: flex; justify-content: space-between;float: left;">
						<div id="myPaletteDiv" style="width: 100px; margin-right: 2px; background-color: whitesmoke; border: solid 1px black; display:none;"></div>
						<div id="myDiagramDiv" style="flex-grow: 1; height: 500px; border: solid 1px black"></div>
					</div>
				</div>
			</div>
			<div class="layui-tab-item">
				<div th:each="row,var : ${dto.rows}">
					<div class="layui-card" style="box-shadow:3px 3px 2px 1px rgba(0, 0, 15, 0.29);">
						<div class="layui-card-body">
							<span>任务状态：[[${row.stateName}]]</span><br>
							<span>执&nbsp;&nbsp;行&nbsp;&nbsp;者：<span th:each="auditor: ${row.auditorArr}">[[${auditor.userId}]]&nbsp;&nbsp;</span></span><br>
							处理时间：<span>[[${row.time}]]</span><br>
							处理备注：<span>[[${row.remark}]]</span><br>
						</div>
					</div>
					<i th:if="${var.last} == false" class="iconfont icon-down-arrow center" style="margin-left: 50%;"></i>
				</div>
			</div>
		</div>
	</div>
</body>
		
</html>